<template>

  <el-dialog title="选择需要导出的字段" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="600px">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="columnsFields" @change="handleCheckedChange">
      <el-checkbox v-for="(item) in exportColumns" :label="item.label" :key="item.label">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button>提交</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'exportPage',
  data() {
    return {
      columnsFields: [],//需要导出的字段
      checkAll: false,
      isIndeterminate: false,
      exportColumns: [
        {key: 'name', label: `客户`, visible: true, minWidth: 150, fixed: true},
        {key: 'mobile', label: `性别`, visible: true, minWidth: 150, fixed: false},
        {key: 'email', label: `称呼`, visible: true, minWidth: 200},
        {key: 'last_login_time', label: `所属企微号`, visible: true, minWidth: 200},
        {key: 'create_time', label: `添加时间`, visible: true, minWidth: 200},
        {key: 'check_payCreate_time', label: `企微标签`, visible: true, minWidth: 200},
        {key: 'check_payStatus_name', label: `智能标签`, visible: true, minWidth: 150},
        {key: 'account_infoStatus_name', label: `客户最后发言`, visible: true, minWidth: 150},
        {key: 'all_num', label: `客户来源`, visible: true, minWidth: 150},
        {key: 'open_num', label: `好友关系`, visible: true, minWidth: 150},
        {key: 'check_num', label: `流失时间`, visible: true, minWidth: 150},
        {key: 'waiting_coin', label: `员工最后发言`, visible: true, minWidth: 150},
        {key: 'mobile', label: `手机号`, visible: true, minWidth: 150},
      ],
    }
  },
  created() {
    this.exportColumns.forEach(item => {
      this.columnsFields.push(item.label);
    });
    this.handleCheckedChange(this.columnsFields); //默认全部选中
  },
  mounted() {
  },
  watch: {},
  methods: {
    handleCheckAllChange(val) {
      this.columnsFields = val ? val : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(val) {
      let checkedCount = val.length;
      this.checkAll = checkedCount === this.exportColumns.length;
      console.log('是否全选', this.checkAll);
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.exportColumns.length;
      //
      // //自定义的代码
      // this.tableColumns.forEach(item => {
      //   item.visible = val.includes(item.label);
      // });
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  display: flex;
  justify-content: flex-end;
}

.el-checkbox-group {
  margin-top: 20px;

  .el-checkbox {
    margin-bottom: 12px;
    width: 150px;
  }
}
</style>
